import { Component } from 'react'
import Detials from './Detials'
import { Layout, Tabs, PageHeader, Button, Modal, Switch, Typography, Space } from 'antd'

/**
 * @author guankongjin
 * @description 角色详情
 */

const { Text } = Typography
const { TabPane } = Tabs

interface ContentProps {
  personaId?: string,
  personaName?: string
}

interface DetialsJson {
  [DC: string]: [];
  VENDOR: [];
  CARRIER: [];
  STORE: [];
  COMPANY: [];
  DISPATCH_CENTER: [];
}

export default class Content extends Component<ContentProps> {
  state = {
    activeKey: '0',//当前选中页签
    activeCode: 'USER',
    status: true,//用户当前状态
    isModalVisible: false, //启用/禁用用户按钮确认modal
    permData: {} as DetialsJson,
    havePermData: {} as DetialsJson,
    moduleData: [] as any
  }

  componentDidMount() {
    this.getInitData()
  }
  //获取角色权限数据
  getInitData = async () => {
    try {
      const allrole = await fetch("http://192.168.112.81/HRMFiles/data/allrole.json")
      const allroleJson = await allrole.json()
      const module = await fetch("http://192.168.112.81/HRMFiles/data/module.json")
      const moduleJson = await module.json()
      //切换角色时获取角色对应权限
      const role = await fetch("http://192.168.112.81/HRMFiles/data/role.json")
      const roleJson = await role.json()

      //TODO 获取角色对应用户
      this.setState({
        permData: allroleJson.data,
        havePermData: roleJson.data,
        moduleData: moduleJson.data
      })
    } catch (error) {
      //TODO 获取数据出错处理
      console.log(error)
    }
  }

  //tab切换事件
  tabChange = (key: string) => {
    this.setState({
      activeKey: key,
      activeCode: this.state.moduleData[Number(key)].code
    })
  }
  //用户禁用/启用事件
  statusChange = () => {
    this.setIsModalVisible(true);
  }
  setIsModalVisible = (flag: boolean) => {
    this.setState({
      isModalVisible: flag
    })
  }
  handleOk = () => {
    this.setState({
      status: !this.state.status
    })
    this.setIsModalVisible(false);
  };
  handleCancel = () => {
    this.setIsModalVisible(false);
  };
  render() {
    const { moduleData, activeKey, activeCode, isModalVisible } = this.state
    const roles = {
      perm: this.state.permData[activeCode],
      havePerm: this.state.havePermData[activeCode]
    }
    const confirmText = `确认${this.state.status ? '禁用' : '启用'}`

    return (
      <Layout className='site-layout'>
        <PageHeader
          className="site-page-content-header"
          title={`[${this.props.personaId}]${this.props.personaName}`}
          tags={
            <Space style={{ marginLeft: '18px' }}>
              <Switch checked={this.state.status} onChange={this.statusChange} />
              <Text>{this.state.status ? '已启用' : '未启用'}</Text>
            </Space>
          }
          extra={[
            <Button key="1">删除</Button>,
            <Button key="2" type="primary">编辑</Button>
          ]}
        >
          <Tabs activeKey={activeKey} animated onChange={this.tabChange}>
            {
                moduleData.map((data: any, index: number) => {
                  return (
                    <TabPane tab={data.name} key={index}>
                      {Number(activeKey) === index && <Detials {...roles} />}
                    </TabPane>
                  )
                })
            }
          </Tabs>
        </PageHeader>

        <Modal title={confirmText} visible={isModalVisible} cancelText='取消' okText='确定'
          onOk={this.handleOk} onCancel={this.handleCancel}>
          <p>{confirmText}该角色: {this.props.personaId} 吗?</p>
        </Modal>
      </Layout>
    )
  }
}
